<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/login.css">
</head>
<body>
<div id="app">
  <div class="content">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="font-size: 18px;text-align: center">
        <span>管理员登录</span>
      </div>
      <div class="content-form">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model.number="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
        <div style="width: 100%; height: 20px;margin-top: -22px;margin-bottom: 40px;text-align: end">
          <el-link href="/adminfront/register">去注册>></el-link>
        </div>
      </div>
    </el-card>
  </div>
</div>
</body>
<script>
  new Vue({
    el: "#app", data() {
      return {
        ruleForm: {
          username: '', pass: '',
        }, rules: {
          username: [{
            trigger: 'blur', required: true, message: '请输入用户名'
          }, {
            min: 0, max: 20, message: "长度在20个字符以内", trigger: 'blur'
          }], pass: [{
            trigger: 'blur', required: true, message: '请输入密码'
          }, {
            min: 2, max: 20, message: "长度在6-20个字符", trigger: 'blur'
          }]
        }
      };
    }, methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var username = this.$data.ruleForm.username;
            var pass = this.$data.ruleForm.pass;
            let userInfo = {"username": username, "password": pass};
            $.ajax({
              type: "POST", url: "/login", data: userInfo, dataType: "json", success: function (data) {
                console.log(data.code);
                if (data.code > 0) {
                  alert(data.message);
                } else {
                  location.href = "/adminfront/index";
                }
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  })
</script>
</html>